<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;padding: 0
        }
        div{
            /* 字体颜色 */
            color: green
        }
        #person{
            color: yellow
        }
        .man{
            color: red
        }
        ul.box li{
            /* 同时存在标签和标签的选择器的时候 */
            color: pink
        }
        i,em,b,strong{
            color: purple
        }
    </style>
</head>
<body>
    <div>
        阿兵
    </div>
    <p id="person">梦凡</p>
    <span class="man">男同学</span>
    <span class="man">男同学</span>
    <span class="man">男同学</span>
    <span class="man">男同学</span>
    <span class="man">男同学</span>
    <span>男同学</span>
    <span>男同学</span>
    <span>男同学</span>
    <span>男同学</span>
    <span>男同学</span>
    <ul class="box">
        <li>1</li>
    </ul>
    <ul>
        <li>2</li>
    </ul>
    <i>1</i>
    <em>2</em>
    <b>3</b>
    <strong>4</strong>




    <!-- 表示的头部 -->
    <div id="head">
        <div></div>
    </div>
    <!-- 表示的是底部 -->
    <div id="foot">
        <div id="" class=""></div>
    </div>
</body>
</html>
<!-- 
    css选择符(选择器)的使用:标签选择符、id选择器、class选择器、包含选择器、群组选择器、通配符
        标签选择器：html的结构标签 div span p a img...
        id选择器：
            - 在标签名称后添加属性 id 表示的最外围的结构
            - 在样式表中 #id选择器的名字 (不要使用纯数字、中文、特殊符号、语义化的英文单词)
        class选择器(类选择器)
            - 在标签名称后添加class属性 
            - 在样式表中 .class选择器的名字
        包含选择器
            - 嵌套关系
            - 父级标签的选择器 子级标签的选择器
        群组选择器:有共同属性时候可以使用
            - 有多个标签的选择器
            - 第一个标签选择器,第二个标签选择器,第三个标签选择器,...
        通配符
            - 固定用法 *{margin:0;padding:0} 清除浏览器的默认间距
            - 建议放在样式表的最上面
 -->
 <!-- 
    div color  标签、id、class
  -->